<template>
  <div class="toolbar">
    <!-- 文件操作 -->
    <div class="tool-group">
      <div class="tool-group-title">文件</div>
      <el-button-group>
        <el-button @click="$emit('upload-image')">
          <el-icon><Upload /></el-icon>上传图片
        </el-button>
        <el-button @click="$emit('change-background')">
          <el-icon><Picture /></el-icon>更换背景
        </el-button>
        <el-button @click="$emit('download')">
          <el-icon><Download /></el-icon>下载
        </el-button>
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 编辑历史 -->
    <div class="tool-group">
      <div class="tool-group-title">历史</div>
      <el-button-group>
        <el-button :disabled="!canUndo" @click="$emit('undo')">
          <el-icon><Back /></el-icon>撤销
        </el-button>
        <el-button :disabled="!canRedo" @click="$emit('redo')">
          <el-icon><Right /></el-icon>重做
        </el-button>
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 变换工具 -->
    <div class="tool-group">
      <div class="tool-group-title">变换</div>
      <el-button-group>
        <el-button @click="$emit('rotate-image', '+90')">
          <el-icon><Refresh /></el-icon>旋转90°
        </el-button>
        <el-button @click="$emit('flip-image', 'horizontal')">
          <el-icon><DCaret /></el-icon>水平翻转
        </el-button>
        <el-button @click="$emit('flip-image', 'vertical')">
          <el-icon><DCaret class="rotate-90" /></el-icon>垂直翻转
        </el-button>
        <el-button @click="$emit('reset-transform')">
          <el-icon><RefreshRight /></el-icon>重置变换
        </el-button>
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 选区工具 -->
    <div class="tool-group">
      <div class="tool-group-title">选区</div>
      <el-button-group>
        <el-dropdown trigger="click" @command="handleSelectionCommand">
          <el-button :class="{ active: isSelecting }">
            <el-icon><Select /></el-icon>选区
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="rect">矩形选区</el-dropdown-item>
              <el-dropdown-item command="lasso">套索选区</el-dropdown-item>
              <el-dropdown-item command="magic-wand">魔棒选区</el-dropdown-item>
              <el-dropdown-item divided command="clear">清除选区</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <template v-if="selectionMode === 'magic-wand'">
          <el-slider
            v-model="tolerance"
            :min="0"
            :max="100"
            size="small"
            style="width: 100px; margin: 0 8px;"
            @change="$emit('set-tolerance', tolerance)"
          />
        </template>
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 绘图工具 -->
    <div class="tool-group">
      <div class="tool-group-title">绘图</div>
      <el-button-group>
        <el-button :class="{ active: isDrawing }" @click="$emit('toggle-drawing', !isDrawing)">
          <el-icon><Edit /></el-icon>绘图
        </el-button>
        <el-select v-model="drawingMode" size="small" @change="$emit('set-drawing-mode', drawingMode)">
          <el-option label="铅笔" value="pencil" />
          <el-option label="喷枪" value="spray" />
          <el-option label="圆形" value="circle" />
        </el-select>
        <el-color-picker
          v-model="drawingColor"
          size="small"
          show-alpha
          @change="$emit('set-drawing-color', drawingColor)"
        />
        <el-input-number
          v-model="drawingWidth"
          :min="1"
          :max="50"
          size="small"
          @change="$emit('set-drawing-width', drawingWidth)"
        />
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 图形工具 -->
    <div class="tool-group">
      <div class="tool-group-title">图形</div>
      <el-button-group>
        <el-dropdown @command="(type) => $emit('add-shape', type)">
          <el-button>
            <el-icon><Plus /></el-icon>添加图形
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="rect">矩形</el-dropdown-item>
              <el-dropdown-item command="circle">圆形</el-dropdown-item>
              <el-dropdown-item command="triangle">三角形</el-dropdown-item>
              <el-dropdown-item command="line">直线</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 文字工具 -->
    <div class="tool-group">
      <div class="tool-group-title">文字</div>
      <el-button-group>
        <el-button @click="$emit('add-text')">
          <el-icon><EditPen /></el-icon>添加文字
        </el-button>
        <el-color-picker
          v-model="textColor"
          size="small"
          show-alpha
          @change="$emit('change-text-color', textColor)"
        />
        <el-input-number
          v-model="fontSize"
          :min="12"
          :max="100"
          size="small"
          @change="$emit('change-text-size', fontSize)"
        />
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 滤镜工具 -->
    <div class="tool-group">
      <div class="tool-group-title">滤镜</div>
      <el-button-group>
        <el-dropdown @command="(filter) => $emit('apply-filter', filter)">
          <el-button>
            <el-icon><PictureFilled /></el-icon>滤镜
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="grayscale">灰度</el-dropdown-item>
              <el-dropdown-item command="brightness">亮度</el-dropdown-item>
              <el-dropdown-item command="contrast">对比度</el-dropdown-item>
              <el-dropdown-item command="saturation">饱和度</el-dropdown-item>
              <el-dropdown-item command="hue">色相</el-dropdown-item>
              <el-dropdown-item command="blur">模糊</el-dropdown-item>
              <el-dropdown-item command="noise">噪点</el-dropdown-item>
              <el-dropdown-item command="pixelate">像素化</el-dropdown-item>
              <el-dropdown-item divided command="remove-filters">清除滤镜</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 混合模式 -->
    <div class="tool-group">
      <div class="tool-group-title">混合</div>
      <el-button-group>
        <el-select
          v-model="blendMode"
          size="small"
          style="width: 120px;"
          @change="$emit('set-blend-mode', blendMode)"
        >
          <el-option
            v-for="mode in blendModes"
            :key="mode.value"
            :label="mode.label"
            :value="mode.value"
          />
        </el-select>
        <el-slider
          v-model="opacity"
          :min="0"
          :max="100"
          size="small"
          style="width: 100px; margin: 0 8px;"
          @change="$emit('set-opacity', opacity)"
        />
      </el-button-group>
    </div>

    <el-divider direction="vertical" />

    <!-- 裁剪工具 -->
    <div class="tool-group">
      <div class="tool-group-title">裁剪</div>
      <el-button-group v-if="!isCropping">
        <el-button @click="$emit('start-cropping')">
          <el-icon><Crop /></el-icon>裁剪
        </el-button>
      </el-button-group>
      <el-button-group v-else>
        <el-button type="primary" @click="$emit('apply-crop')">确认裁剪</el-button>
        <el-button @click="$emit('cancel-crop')">取消裁剪</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Upload,
  Picture,
  Download,
  Back,
  Right,
  Edit,
  EditPen,
  Plus,
  PictureFilled,
  Crop,
  Refresh,
  DCaret,
  RefreshRight,
  Select
} from '@element-plus/icons-vue'

// 文字相关
const textColor = ref('#000000')
const fontSize = ref(20)

// 绘图相关
const isDrawing = ref(false)
const drawingMode = ref('pencil')
const drawingColor = ref('#000000')
const drawingWidth = ref(2)

// 选区相关
const isSelecting = ref(false)
const selectionMode = ref('rect')
const tolerance = ref(32)

// 混合模式相关
const blendMode = ref('source-over')
const opacity = ref(100)
const blendModes = [
  { label: '正常', value: 'source-over' },
  { label: '正片叠底', value: 'multiply' },
  { label: '滤色', value: 'screen' },
  { label: '叠加', value: 'overlay' },
  { label: '变暗', value: 'darken' },
  { label: '变亮', value: 'lighten' },
  { label: '颜色减淡', value: 'color-dodge' },
  { label: '颜色加深', value: 'color-burn' },
  { label: '强光', value: 'hard-light' },
  { label: '柔光', value: 'soft-light' },
  { label: '差值', value: 'difference' },
  { label: '排除', value: 'exclusion' },
  { label: '色相', value: 'hue' },
  { label: '饱和度', value: 'saturation' },
  { label: '颜色', value: 'color' },
  { label: '亮度', value: 'luminosity' }
]

// 裁剪相关
const isCropping = ref(false)

defineProps({
  canUndo: Boolean,
  canRedo: Boolean
})

// 处理选区命令
const handleSelectionCommand = (command) => {
  if (command === 'clear') {
    isSelecting.value = false
    selectionMode.value = 'rect'
    emit('clear-selection')
  } else {
    isSelecting.value = true
    selectionMode.value = command
    emit('start-selection', command)
  }
}

const emit = defineEmits([
  'upload-image',
  'change-background',
  'download',
  'undo',
  'redo',
  'rotate-image',
  'flip-image',
  'reset-transform',
  'toggle-drawing',
  'set-drawing-mode',
  'set-drawing-color',
  'set-drawing-width',
  'add-shape',
  'add-text',
  'change-text-color',
  'change-text-size',
  'apply-filter',
  'set-blend-mode',
  'set-opacity',
  'start-cropping',
  'apply-crop',
  'cancel-crop',
  'start-selection',
  'clear-selection',
  'set-tolerance'
])
</script>

<style scoped>
.toolbar {
  padding: 12px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tool-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: 6px;
  background-color: #f9fafb;
}

.tool-group-title {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 8px;
}

.el-button-group {
  display: flex;
  align-items: center;
  background-color: #f9fafb;
  border-radius: 6px;
  padding: 4px;
  gap: 4px;
}

.el-button {
  border: none;
  background: transparent;
  color: #4b5563;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.el-button:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.el-button.active {
  background-color: #e5e7eb;
  color: #111827;
  font-weight: 500;
}

.el-button .el-icon {
  margin-right: 4px;
  font-size: 16px;
}

.el-divider {
  margin: 0 8px;
  height: 24px;
  border-color: #e5e7eb;
}

.el-select {
  width: 120px;
  background-color: #f9fafb;
  border-radius: 6px;
}

.el-select :deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

.el-select :deep(.el-input__wrapper:hover) {
  border-color: #d1d5db;
}

.el-color-picker {
  margin: 0 8px;
}

.el-color-picker :deep(.el-color-picker__trigger) {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.el-input-number {
  width: 100px;
  background-color: #f9fafb;
  border-radius: 6px;
}

.el-input-number :deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

.el-input-number :deep(.el-input__wrapper:hover) {
  border-color: #d1d5db;
}

.el-slider {
  margin: 0 8px;
}

.el-slider :deep(.el-slider__runway) {
  background-color: #e5e7eb;
}

.el-slider :deep(.el-slider__button-wrapper) {
  top: -16px;
}

.el-slider :deep(.el-slider__button) {
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.el-dropdown-menu {
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.el-dropdown-menu__item {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 4px;
}

.el-dropdown-menu__item:hover {
  background-color: #f3f4f6;
}

.el-dropdown-menu__item.is-disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.rotate-90 {
  transform: rotate(90deg);
}
</style> 